<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>豪王益购</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- 自定义样式 -->
    <style>
        .text-gradient {
            background: linear-gradient(90deg, #ff9a9e, #fad0c4);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .gradient-bg {
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
        }

        /* 分类下拉菜单核心样式 */

        .category-dropdown {
            transition: all 0.3s ease;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .category-item {
            transition: all 0.2s ease;
        }

        .category-item:hover {
            color: #FF6B00;
            padding-left: 4px;
            text-decoration: underline;
        }

        /* 导航栏滚动效果 */

        .nav-scrolled {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }

        /* 鼠标悬停展示分类内容样式 */

        .category-container {
            position: relative;
        }

        .category-dropdown {
            position: absolute;
            left: 0;
            top: 100%;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }

        .category-container:hover .category-dropdown {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .gradient-bg {
            background: linear-gradient(135deg, #FF6B00 0%, #FF9500 100%);
            position: relative;
        }

        .gradient-bg::after {
            content: "";
            position: absolute;
            inset: 0;
        }

        .card-hover {
            transition: all 0.3s ease;
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
        }

        .nav-link {
            @apply relative text-dark hover: text-primary font-medium transition-colors;
        }

        .nav-link::after {
            @apply content-[''] absolute bottom-0 left-0 w-0 h-0.5 bg-primary transition-all duration-300;
        }

        .nav-link:hover::after {
            @apply w-full;
        }
    </style>

    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B00',
                        secondary: '#34D399',
                        dark: '#1E293B',
                        light: '#F8FAFC',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                },
            }
        }
    </script>
</head>

<body class="font-inter bg-gray-50 text-dark">
    <!-- 导航栏 -->
    <nav id="main-nav" class="fixed w-full z-50 bg-white shadow-sm">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <a href="#" class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center">
                    <i class="fa fa-shopping-bag text-white text-xl"></i>
                </div>
                <span class="text-xl font-bold text-dark">豪王益购</span>
            </a>

            <!-- PC端导航菜单 -->
            <div class="hidden md:flex items-center flex-1 max-w-3xl mx-8 space-x-6">
                <a href="#" class="nav-link">首页</a>
                <a href="#" class="nav-link">促销商品</a>

                <!-- 商品分类下拉菜单 - 核心实现 -->
                <div class="category-container">
                    <a href="#" class="nav-link">商品分类</a>
                    <div id="category-dropdown"
                        class="category-dropdown absolute left-0 top-full mt-2 w-80 bg-white rounded-lg shadow-xl p-4 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible group-hover:translate-y-0 translate-y-2 transition-all duration-300">
                        <div class="grid grid-cols-3 gap-4">
                            <!-- 第一列分类 -->
                            <div>
                                <h4 class="font-bold text-sm mb-2 text-dark">折扣优惠</h4>
                                <ul class="space-y-1 text-sm">
                                    <li><a href="#" class="category-item">立减不只5折</a></li>
                                    <li><a href="#" class="category-item">抢省钱补贴</a></li>
                                </ul>
                            </div>

                            <!-- 第二列分类 -->
                            <div>
                                <h4 class="font-bold text-sm mb-2 text-dark">电子办公</h4>
                                <ul class="space-y-1 text-sm">
                                    <li><a href="#" class="category-item">电脑/配件</a></li>
                                    <li><a href="#" class="category-item">办公/文具</a></li>
                                    <li><a href="#" class="category-item">家电/手机</a></li>
                                    <li><a href="#" class="category-item">通信/数码</a></li>
                                </ul>
                            </div>

                            <!-- 第三列分类 -->
                            <div>
                                <h4 class="font-bold text-sm mb-2 text-dark">工业家居</h4>
                                <ul class="space-y-1 text-sm">
                                    <li><a href="#" class="category-item">工业品</a></li>
                                    <li><a href="#" class="category-item">商业/农业</a></li>
                                    <li><a href="#" class="category-item">定制服务</a></li>
                                    <li><a href="#" class="category-item">家具/家装</a></li>
                                    <li><a href="#" class="category-item">家居/厨具</a></li>
                                </ul>
                            </div>

                            <!-- 第四列分类 -->
                            <div>
                                <h4 class="font-bold text-sm mb-2 text-dark">服装鞋包</h4>
                                <ul class="space-y-1 text-sm">
                                    <li><a href="#" class="category-item">女装/男装</a></li>
                                    <li><a href="#" class="category-item">内衣/配饰</a></li>
                                    <li><a href="#" class="category-item">女鞋/男鞋</a></li>
                                    <li><a href="#" class="category-item">运动/户外</a></li>
                                </ul>
                            </div>

                            <!-- 第五列分类 -->
                            <div>
                                <h4 class="font-bold text-sm mb-2 text-dark">生活百货</h4>
                                <ul class="space-y-1 text-sm">
                                    <li><a href="#" class="category-item">汽车/珠宝</a></li>
                                    <li><a href="#" class="category-item">文玩/箱包</a></li>
                                    <li><a href="#" class="category-item">食品/生鲜</a></li>
                                    <li><a href="#" class="category-item">酒类/健康</a></li>
                                </ul>
                            </div>

                            <!-- 第六列分类 -->
                            <div>
                                <h4 class="font-bold text-sm mb-2 text-dark">母婴美妆</h4>
                                <ul class="space-y-1 text-sm">
                                    <li><a href="#" class="category-item">母婴/童装</a></li>
                                    <li><a href="#" class="category-item">玩具/宠物</a></li>
                                    <li><a href="#" class="category-item">美妆/个护</a></li>
                                    <li><a href="#" class="category-item">娱乐/图书</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

                <a href="#" class="nav-link">我的订单</a>
                <a href="#" class="nav-link">客服</a>

                <!-- PC 端搜索框 -->
                <div class="relative flex-1 ml-4">
                    <input type="text" placeholder="搜索商品..."
                        class="w-full pl-4 pr-10 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all">
                    <button
                        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary transition-colors">
                        <i class="fa fa-search"></i>
                    </button>
                </div>
            </div>

            <div class="flex items-center space-x-4">
                <button id="mobile-search-btn" class="md:hidden text-gray-600 hover:text-primary transition-colors">
                    <i class="fa fa-search text-xl"></i>
                </button>

                <div class="flex items-center space-x-4">
                    <button id="login-btn" class="text-gray-600 hover:text-primary transition-colors">
                        <i class="fa fa-user text-xl"></i>
                    </button>

                    <div class="relative">
                        <button id="cart-btn" class="text-gray-600 hover:text-primary transition-colors">
                            <i class="fa fa-shopping-cart text-xl"></i>
                            <span id="cart-count"
                                class="absolute -top-2 -right-2 w-5 h-5 bg-primary text-white text-xs rounded-full flex items-center justify-center">0</span>
                        </button>
                    </div>
                </div>
            </div>

            <button id="mobile-menu-btn" class="md:hidden text-gray-600 hover:text-primary transition-colors">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 移动端搜索框 -->
    <div id="mobile-search" class="md:hidden hidden px-4 py-3 bg-white border-t">
        <div class="relative">
            <input type="text" placeholder="搜索商品..."
                class="w-full pl-4 pr-10 py-2 rounded-full border focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
            <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
                <i class="fa fa-search"></i>
            </button>
        </div>
    </div>

    <!-- 页面容器 -->
    <div id="page-container" class="pt-20 min-h-screen">
        <!-- 购物车侧边栏 -->
        <div id="cart-sidebar"
            class="fixed inset-y-0 right-0 w-full max-w-md bg-white shadow-2xl transform translate-x-full transition-transform duration-300 z-50">
            <div class="flex flex-col h-full">
                <div class="p-4 border-b flex items-center justify-between">
                    <h3 class="text-lg font-bold">购物车</h3>
                    <button id="close-cart" class="text-gray-500 hover:text-gray-700 transition-colors">
                        <i class="fa fa-times"></i>
                    </button>
                </div>

                <div id="cart-items" class="flex-1 overflow-y-auto p-4">
                    <div id="empty-cart" class="flex flex-col items-center justify-center h-full">
                        <i class="fa fa-shopping-cart text-gray-300 text-6xl mb-4"></i>
                        <p class="text-gray-500">购物车是空的</p>
                        <button
                            class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                            立即购物
                        </button>
                    </div>

                    <div id="cart-items-list" class="hidden space-y-4">
                        <!-- 购物车商品将动态添加 -->
                    </div>
                </div>

                <div class="p-4 border-t">
                    <div class="flex justify-between mb-4">
                        <span class="text-gray-600">小计</span>
                        <span id="cart-subtotal" class="font-medium">¥0.00</span>
                    </div>
                    <button id="checkout-btn"
                        class="w-full py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
                        结算
                    </button>
                </div>
            </div>
        </div>

        <!-- 主内容区 -->
        <main>
            <!-- 轮播图 -->
            <section class="relative overflow-hidden">
                <div class="h-[300px] md:h-[480px] gradient-bg flex flex-col md:flex-row items-center">
                    <!-- 左侧图片区域 -->
                    <div class="md:w-7/10 w-full h-full relative">
                        <img src="商品图片/大图.jpeg" alt="夏季促销"
                            class="w-full h-full object-cover rounded-r-2xl shadow-2xl" />
                        <!-- 图片装饰元素 -->
                        <div
                            class="absolute top-4 left-4 bg-white/90 text-primary px-3 py-1 rounded-full text-sm font-medium shadow-lg animate-pulse">
                            限时特惠
                        </div>
                    </div>
                    <!-- 右侧内容区域（强化视觉与交互） -->
                    <div
                        class="md:w-3/10 w-full h-full p-5 md:p-8 flex flex-col justify-center relative overflow-hidden">
                        <!-- 背景装饰元素 -->
                        <div class="absolute -top-10 -right-10 w-32 h-32 bg-white/20 rounded-full blur-3xl"></div>
                        <div class="absolute -bottom-5 -left-5 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>

                        <!-- 标题区域（多层次排版） -->
                        <h2 class="text-[clamp(1.5rem,3vw,2.2rem)] font-bold text-white mb-2 relative z-10">
                            夏季<span class="text-gradient">焕新季</span>
                            <span class="absolute -bottom-1 left-0 w-1/3 h-1 bg-primary rounded-full"></span>
                        </h2>
                        <p class="text-white/90 mb-6 text-[clamp(1rem,2vw,1.1rem)] relative z-10">
                            <i class="fas fa-tag mr-2 text-primary animate-bounce"></i>满300减80
                            <i class="fas fa-ticket-alt mr-2 text-primary"></i>新品8折
                            <i class="fas fa-clock mr-2 text-primary"></i>倒计时72h
                        </p>

                        <!-- 动态进度条 -->
                        <div class="w-full h-2 bg-white/20 rounded-full mb-6 relative z-10">
                            <div class="h-full bg-primary rounded-full animate-pulse" style="width: 65%"></div>
                            <span class="absolute -top-5 right-0 text-white/80 text-sm font-medium">剩余65%</span>
                        </div>

                        <!-- 按钮组（多样化样式） -->
                        <div class="flex flex-col space-y-3 relative z-10">
                            <!-- 主按钮（渐变色+3D阴影） -->
                            <button
                                class="bg-gradient-to-r from-primary to-secondary text-white px-6 py-3 rounded-full font-medium shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center">
                                <i class="fas fa-shopping-cart mr-2"></i>立即抢购
                                <span class="ml-1 h-2 w-2 bg-white rounded-full animate-pulse"></span>
                            </button>
                            <!-- 次级按钮（透明边框+悬停效果） -->
                            <button
                                class="border-2 border-white/70 text-white px-6 py-3 rounded-full font-medium hover:bg-white/10 backdrop-blur-sm transition-all duration-300 flex items-center justify-center">
                                <i class="fas fa-heart mr-2"></i>收藏关注
                            </button>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 分类导航 - 优化版 -->
      <section class="py-8">
        <div class="container mx-auto px-4">
          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
            <!-- 服装分类 -->
            <a href="#" class="group flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
              <div class="w-14 h-14 rounded-full bg-primary/10 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24"><path fill="currentColor" d="m6 10.95l-1 .55q-.35.2-.75.1t-.6-.45l-2-3.5q-.2-.35-.1-.75T2 6.3L7.75 3H9.5q.225 0 .363.138T10 3.5V4q0 .825.588 1.413T12 6t1.413-.587T14 4v-.5q0-.225.138-.363T14.5 3h1.75L22 6.3q.35.2.45.6t-.1.75l-2 3.5q-.2.35-.588.438T19 11.475l-1-.5V20q0 .425-.288.713T17 21H7q-.425 0-.712-.288T6 20z"></path></svg>
              </div>
              <span class="text-sm font-medium text-dark group-hover:text-primary transition-colors">服装</span>
            </a>

            <!-- 电子分类 -->
            <a href="#" class="group flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
              <div class="w-14 h-14 rounded-full bg-blue-100 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                <i class="fa fa-headphones text-blue-500 text-xl"></i>
              </div>
              <span class="text-sm font-medium text-dark group-hover:text-blue-500 transition-colors">电子</span>
            </a>

            <!-- 鞋包分类 -->
            <a href="#" class="group flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
              <div class="w-14 h-14 rounded-full bg-purple-100 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 48 48"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="4" data-swindex="0"><path stroke-linejoin="bevel" d="m11.2 6.854l-.708.225c-3.487 1.104-5.536 4.71-4.898 8.312c.73 4.115 1.291 8.04 2.095 11.661c.785 3.537.447 6.689.25 10.032c-.192 3.266 2.409 5.843 5.672 6.07c4.623.321 8.182-4.082 7.297-8.63c-.684-3.516-1.202-7.318-.969-10.024c.25-2.904.277-7.29.23-11.251c-.055-4.616-4.568-7.788-8.968-6.395Zm23.61-1.131l-.77.144c-3.455.648-5.892 3.761-5.926 7.277C28.071 17.701 27.831 22.15 28 26c.156 3.553-.437 6.153-1.017 9.053c-.626 3.13 1.443 6.044 4.54 6.815c4.485 1.116 8.712-2.698 8.577-7.318c-.093-3.175.03-6.512.681-8.95c.79-2.96 1.547-7.903 2.129-12.314c.61-4.632-3.509-8.424-8.1-7.563Z"></path><path stroke-linejoin="round" stroke-miterlimit="2" d="M8 29c1-9 6-14 6-14c1.636 2 4 8 6 14m20 1c.5-8-5-16-5-16c-1.636 2-7 5.278-7 11.5"></path></g></svg>
              </div>
              <span class="text-sm font-medium text-dark group-hover:text-purple-500 transition-colors">鞋包</span>
            </a>

            <!-- 珠宝分类 -->
            <a href="#" class="group flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
              <div class="w-14 h-14 rounded-full bg-indigo-100 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 50 50"><path fill="currentColor" d="m46.476 20.662l-.013-.101a1.27 1.27 0 0 0-.127-.362L40 10s-.808-1-1-1H12L3.88 19.853l-.096.1l-.013.047a1.78 1.78 0 0 0-.168.35l-.033.097a1.575 1.575 0 0 0 .013.95l.038.109c.051.129.114.247.188.352L23.44 46.725l.04.057c.101.13.224.245.374.35l.114.071c.112.07.229.126.399.188l.111.037c.192.049.359.072.522.072c.165 0 .326-.022.543-.078l.133-.047c.13-.046.247-.103.388-.19l.088-.055c.151-.107.272-.223.339-.314l19.656-24.893a1.747 1.747 0 0 0 .33-.79l.015-.129l.008-.102zM35.936 20l2.798-5.063L41.53 20zm-1.678 3h6.638L29.832 37.015zm-1.642-4.518L28.575 13h7.07zM19.672 23h10.659L25 39.877zm1.057-3L25 14.204L29.271 20zm-3.008-1.972L15.869 13h5.557zm2.449 18.988L9.105 23h6.639zm-7.505-22.044L14.518 20H8.96z"></path></svg>
              </div>
              <span class="text-sm font-medium text-dark group-hover:text-indigo-500 transition-colors">珠宝</span>
            </a>

            <!-- 游戏分类 -->
            <a href="#" class="group flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
              <div class="w-14 h-14 rounded-full bg-green-100 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                <i class="fa fa-gamepad text-green-500 text-xl"></i>
              </div>
              <span class="text-sm font-medium text-dark group-hover:text-green-500 transition-colors">游戏</span>
            </a>

            <!-- 礼品分类 -->
            <a href="#" class="group flex flex-col items-center p-4 bg-white rounded-xl shadow-sm hover:shadow-md transition-all duration-300">
              <div class="w-14 h-14 rounded-full bg-red-100 flex items-center justify-center mb-3 group-hover:scale-110 transition-transform duration-300">
                <i class="fa fa-gift text-red-500 text-xl"></i>
              </div>
              <span class="text-sm font-medium text-dark group-hover:text-red-500 transition-colors">礼品</span>
            </a>
          </div>
        </div>
      </section>

      <!-- 商品列表 -->
      <section class="py-6">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold">热卖商品</h2>
            <a href="#" class="text-primary text-sm flex items-center">
              查看更多 <i class="fas fa-angle-right ml-1 text-xs"></i>
            </a>
          </div>

          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            <!-- 商品卡片 -->
            <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
                <a href="./实训商品4/detail.html">
              <div class="relative">
                <img src="商品图片/连衣裙图片.png" alt="夏季连衣裙" class="w-full h-48 object-cover">
                <div class="absolute top-2 left-2 bg-danger text-white text-xs px-2 py-1 rounded">-30%</div>
              </div>
            </a>
              <div class="p-3">
                <a href="./实训商品4/detail.html">
                <h3 class="font-medium text-sm mb-1 line-clamp-2">益益好牌2025夏季新款碎花雪纺裙，方领泡泡袖，浅蓝底白花超仙，收腰大裙摆，浪漫氛围感拉满</h3>
                <div class="flex items-center justify-between">
                  <span class="text-primary font-bold">¥199</span>
                  <span class="text-gray-400 text-xs line-through">¥299</span>
                </div>
              </a>
                <button class="w-full mt-2 py-1.5 bg-primary text-white text-sm rounded hover:bg-primary/90 add-to-cart transition-colors" data-id="1" data-name="夏季碎花雪纺裙" data-price="199">
                  加入购物车
                </button>
              </div>
            </div>
            
            <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
              <a href="./实训商品3/detail.html">
              <div class="relative">
                <img src="商品图片/蓝牙耳机图片.png" alt="蓝牙耳机" class="w-full h-48 object-cover">
                <div class="absolute top-2 left-2 bg-secondary text-white text-xs px-2 py-1 rounded">新品</div>
              </div>
              </a>
              <div class="p-3">
                <a href="./实训商品3/detail.html">
                <h3 class="font-medium text-sm mb-1 line-clamp-2">肝帝牌,可爱心型充电仓设计，粉粉嫩嫩超少女,无线蓝牙耳机，适配安卓苹果</h3>
                <div class="flex items-center justify-between">
                  <span class="text-primary font-bold">¥299</span>
                  <span class="text-gray-400 text-xs line-through">¥399</span>
                </div>
                </a>
                <button class="w-full mt-2 py-1.5 bg-primary text-white text-sm rounded hover:bg-primary/90 add-to-cart transition-colors" data-id="2" data-name="可爱心型蓝牙耳机" data-price="299">
                  加入购物车
                </button>
              </div>
            </div>

            <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
              <a href="./实训商品2/detail.html">
              <div class="relative">
                <img src="商品图片/休闲运动鞋图片.png" alt="休闲运动鞋" class="w-full h-48 object-cover">
                <div class="absolute top-2 left-2 bg-danger text-white text-xs px-2 py-1 rounded">-25%</div>
              </div>
              </a>
              <div class="p-3">
                <a href="./实训商品2/detail.html">
                <h3 class="font-medium text-sm mb-1 line-clamp-2">WYH街头潮款！2025新款运动鞋，黑银拼接 + 荧光绿鞋带，超酷撞色</h3>
                <div class="flex items-center justify-between">
                  <span class="text-primary font-bold">¥349</span>
                  <span class="text-gray-400 text-xs line-through">¥499</span>
                </div>
                </a>
                <button class="w-full mt-2 py-1.5 bg-primary text-white text-sm rounded hover:bg-primary/90 add-to-cart transition-colors" data-id="3" data-name="街头潮款运动鞋" data-price="349">
                  加入购物车
                </button>
              </div>
            </div>

            <div class="bg-white rounded-lg overflow-hidden shadow-sm card-hover">
              <a href="./实训商品1/detail.html">
              <div class="relative">
                <img src="商品图片/时尚太阳镜图片.png" alt="时尚太阳镜" class="w-full h-48 object-cover">
              </div>
              </a>
              <div class="p-3">
                <a href="./实训商品1/detail.html">
                <h3 class="font-medium text-sm mb-1 line-clamp-2">YYYCF海岛度假风！金属框绿片墨镜，潮流双梁设计，酷飒又出片</h3>
                <div class="flex items-center justify-between">
                  <span class="text-primary font-bold">¥159</span>
                  <span class="text-gray-400 text-xs line-through">¥220</span>
                </div>
                </a>
                <button class="w-full mt-2 py-1.5 bg-primary text-white text-sm rounded hover:bg-primary/90 add-to-cart transition-colors" data-id="4" data-name="海岛度假风太阳镜" data-price="159">
                  加入购物车
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 促销活动 -->
      <section class="py-6">
        <div class="container mx-auto px-4">
          <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl overflow-hidden">
            <div class="flex flex-col md:flex-row">
              <div class="md:w-1/2 p-6 text-white">
                <h3 class="text-xl font-bold mb-2">会员专享</h3>
                <p class="mb-4">【豪王会员日・折上折暴击来啦！】
                  ✨全场通用！先领券再打折，9折叠加更疯狂✨<br>
                  🔔会员专享福利通道已开启！戳「会员中心」领无门槛9折券，全店商品（含爆款/新品）直接叠用，买1件也是会员价！<br>
                  🛒举个栗子：原价199元连衣裙，店铺满减先降30，领9折券再减16.9，实付152.1元抱走！比平时省46.9元→这波羊毛必须薅！<br>
                  🔥会员日限定4重王炸福利，错过等半年！<br>
                  「新客入会必囤」首单立减50元<br>
                  → 新人扫码注册即得「50元无门槛券」，叠加9折券买爆款卫衣，原价129元→券后+折后仅66.1元，还送定制帆布包！<br>
                  「老客回血计划」积分当钱花<br>
                  → 活动期间消费享3倍积分！100积分=10元，买500元商品攒1500积分，下次购物直接抵150元，相当于白赚3件T恤钱！<br>
                  「满赠狂欢屋」买得越多送得越狠<br>
                  ▶ 实付满300元→送网红保温杯（限量1000个）<br>
                  ▶ 满600元→加赠大牌小样套装（大小随机）<br>
                  ▶ 满1000元→抽免单资格（每天10名，付款即开奖）<br>
                  「极速尊享服务」会员专属特权<br>
                  ✅ 优先发货（下单后2小时闪电出库）<br>
                  ✅ 退换货延长至30天（试错无压力）<br>
                  ✅ 专属客服1对1（报会员ID秒插队解答）</p>
                <button class="px-4 py-2 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100 transition-colors">
                  了解更多
                </button>
              </div>
              <div class="md:w-1/2">
                <img src="商品图片/会员好图.jpeg" alt="促销活动" class="w-full h-full object-cover">
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 用户评价 -->
      <section class="py-6">
        <div class="container mx-auto px-4">
          <h2 class="text-xl font-bold mb-4">用户评价</h2>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-lg shadow-sm">
              <div class="flex items-center mb-3">
                <img src="https://picsum.photos/seed/user1/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                <div>
                  <h4 class="font-medium text-sm">张三</h4>
                  <div class="flex text-warning text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                  </div>
                </div>
              </div>
              <p class="text-gray-600 text-sm">商品质量非常好，与描述完全一致，物流也很快！客服态度很好，有问必答，下次还会再来购买。</p>
            </div>

            <div class="bg-white p-4 rounded-lg shadow-sm">
              <div class="flex items-center mb-3">
                <img src="https://picsum.photos/seed/user2/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                <div>
                  <h4 class="font-medium text-sm">李四</h4>
                  <div class="flex text-warning text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-half-o"></i>
                  </div>
                </div>
              </div>
              <p class="text-gray-600 text-sm">这是我第二次购买了，产品真的很好用，设计很贴心！唯一的小缺点是包装可以再改进一下，不过不影响使用。</p>
            </div>

            <div class="bg-white p-4 rounded-lg shadow-sm">
              <div class="flex items-center mb-3">
                <img src="https://picsum.photos/seed/user3/100/100" alt="用户头像" class="w-10 h-10 rounded-full mr-3">
                <div>
                  <h4 class="font-medium text-sm">王二豪</h4>
                  <div class="flex text-warning text-xs">
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star"></i>
                    <i class="fa fa-star-o"></i>
                  </div>
                </div>
              </div>
              <p class="text-gray-600 text-sm">衣服面料很舒服，穿的好爽啊啊啊啊啊啊啊啊！尺码标准，按照客服推荐的尺码购买刚好合适，已经推荐给朋友了。</p>
            </div>
          </div>
        </div>
      </section>
    </main>


        <!-- 页脚 -->
        <footer class="bg-dark text-white py-8">
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h4 class="text-lg font-bold mb-4">关于我们</h4>
                        <ul class="space-y-2 text-sm text-gray-400">
                            <li><a href="#" class="hover:text-white transition-colors">公司简介</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">加入我们</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-bold mb-4">客户服务</h4>
                        <ul class="space-y-2 text-sm text-gray-400">
                            <li><a href="#" class="hover:text-white transition-colors">帮助中心</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">订单查询</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">配送政策</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">退换货政策</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-bold mb-4">支付方式</h4>
                        <ul class="space-y-2 text-sm text-gray-400">
                            <li><a href="#" class="hover:text-white transition-colors">在线支付</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">银行转账</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">货到付款</a></li>
                        </ul>
                    </div>

                    <div>
                        <h4 class="text-lg font-bold mb-4">关注我们</h4>
                        <ul class="flex space-x-4">
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors"><i
                                        class="fa fa-facebook-f text-xl"></i></a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors"><i
                                        class="fa fa-twitter text-xl"></i></a></li>
                            <li><a href="#" class="text-gray-400 hover:text-white transition-colors"><i
                                        class="fa fa-instagram text-xl"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="text-center text-sm text-gray-400 mt-8">
                    &copy; 2024 豪王益购. 保留所有权利.
                </div>
            </div>
        </footer>
    </div>

    <script>
        // 导航栏滚动效果
        const nav = document.getElementById('main-nav');
        window.addEventListener('scroll', function () {
            if (window.scrollY > 10) {
                nav.classList.add('nav-scrolled');
            } else {
                nav.classList.remove('nav-scrolled');
            }
        });

        // 移动搜索框切换
        const mobileSearchBtn = document.getElementById('mobile-search-btn');
        const mobileSearch = document.getElementById('mobile-search');

        mobileSearchBtn.addEventListener('click', function () {
            mobileSearch.classList.toggle('hidden');
        });

        // 点击人型图标跳转至用户登录界面
        const loginBtn = document.getElementById('login-btn');
        loginBtn.addEventListener('click', function () {
            window.location.href = 'index4.html';
        });

        // 购物车功能
        const cartBtn = document.getElementById('cart-btn');
        const closeCart = document.getElementById('close-cart');
        const cartSidebar = document.getElementById('cart-sidebar');
        const cartCount = document.getElementById('cart-count');
        const cartItemsList = document.getElementById('cart-items-list');
        const emptyCart = document.getElementById('empty-cart');
        const cartSubtotal = document.getElementById('cart-subtotal');
        const checkoutBtn = document.getElementById('checkout-btn');

        // 购物车数据
        let cart = [];

        // 打开购物车
        cartBtn.addEventListener('click', function () {
            cartSidebar.classList.remove('translate-x-full');
        });

        // 关闭购物车
        closeCart.addEventListener('click', function () {
            cartSidebar.classList.add('translate-x-full');
        });

        // 点击购物车外部关闭
        document.addEventListener('click', function (e) {
            if (e.target === cartSidebar) {
                cartSidebar.classList.add('translate-x-full');
            }
        });

        // 添加商品到购物车
        document.querySelectorAll('.add-to-cart').forEach(button => {
            button.addEventListener('click', function () {
                const productId = this.getAttribute('data-id');
                const productName = this.getAttribute('data-name');
                const productPrice = parseFloat(this.getAttribute('data-price'));

                // 检查商品是否已在购物车中
                const existingItem = cart.find(item => item.id === productId);

                if (existingItem) {
                    // 如果已存在，增加数量
                    existingItem.quantity += 1;
                } else {
                    // 如果不存在，添加新商品
                    cart.push({
                        id: productId,
                        name: productName,
                        price: productPrice,
                        quantity: 1
                    });
                }

                // 更新购物车显示
                updateCart();

                // 添加按钮动画效果
                this.innerHTML = '<i class="fa fa-check mr-1"></i>已加入';
                this.classList.add('bg-green-500');

                setTimeout(() => {
                    this.innerHTML = '加入购物车';
                    this.classList.remove('bg-green-500');
                }, 1000);
            });
        });

        function updateCart() {
            cartItemsList.innerHTML = '';
            let subtotal = 0;

            cart.forEach(item => {
                const itemTotal = item.price * item.quantity;
                subtotal += itemTotal;

                const cartItem = document.createElement('div');
                cartItem.classList.add('flex', 'items-center', 'justify-between');
                cartItem.innerHTML = `
          <div class="flex items-center">
            <div class="flex flex-col">
              <span class="font-medium">${item.name}</span>
              <span class="text-gray-600">¥${item.price.toFixed(2)}</span>
            </div>
            <div class="flex items-center ml-4">
              <button class="decrease-quantity w-6 h-6 flex items-center justify-center border rounded-full text-sm" data-id="${item.id}">-</button>
              <span class="mx-2 text-sm">${item.quantity}</span>
              <button class="increase-quantity w-6 h-6 flex items-center justify-center border rounded-full text-sm" data-id="${item.id}">+</button>
            </div>
          </div>
          <div class="ml-4 font-medium">¥${itemTotal.toFixed(2)}</div>
          <button class="remove-item ml-4 text-gray-400 hover:text-danger transition-colors" data-id="${item.id}">
            <i class="fa fa-trash"></i>
          </button>
        `;

                cartItemsList.appendChild(cartItem);
            });

            // 更新小计
            cartSubtotal.textContent = `¥${subtotal.toFixed(2)}`;

            // 显示或隐藏购物车为空提示
            if (cart.length > 0) {
                emptyCart.classList.add('hidden');
                cartItemsList.classList.remove('hidden');
            } else {
                emptyCart.classList.remove('hidden');
                cartItemsList.classList.add('hidden');
            }

            // 更新购物车数量显示
            cartCount.textContent = cart.length;

            // 添加数量增减和删除按钮事件
            document.querySelectorAll('.decrease-quantity').forEach(button => {
                button.addEventListener('click', function () {
                    const productId = this.getAttribute('data-id');
                    const itemIndex = cart.findIndex(item => item.id === productId);

                    if (itemIndex !== -1) {
                        if (cart[itemIndex].quantity > 1) {
                            cart[itemIndex].quantity -= 1;
                        } else {
                            cart.splice(itemIndex, 1);
                        }

                        updateCart();
                    }
                });
            });

            document.querySelectorAll('.increase-quantity').forEach(button => {
                button.addEventListener('click', function () {
                    const productId = this.getAttribute('data-id');
                    const item = cart.find(item => item.id === productId);

                    if (item) {
                        item.quantity += 1;
                        updateCart();
                    }
                });
            });

            document.querySelectorAll('.remove-item').forEach(button => {
                button.addEventListener('click', function () {
                    const productId = this.getAttribute('data-id');
                    const itemIndex = cart.findIndex(item => item.id === productId);

                    if (itemIndex !== -1) {
                        cart.splice(itemIndex, 1);
                        updateCart();
                    }
                });
            });
        }

        // 结算按钮点击事件
        checkoutBtn.addEventListener('click', function () {
            if (cart.length > 0) {
                alert('感谢您的购买！祝老板万事顺利，身体健康');
            } else {
                alert('购物车为空，请先添加商品！');
            }
        });
    </script>
</body>

</html>